
/*
*
* Gallery-specific Styles
*
*/
* {
margin: 0;
padding: 0;
list-style: none;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#gallery-container {
font-size: 20px;
margin: auto;
position: relative;
max-width: 50em;
text-align: center;
overflow: hidden;
padding-top: 1em
}
#gallery-container:full-screen {
max-width: 100% !important;
width: 100%;
height: 100% !important;
background-color: #111
}
#gallery-container:-webkit-full-screen {
max-width: 100% !important;
width: 100%;
height: 100% !important;
background-color: #111
}
#gallery-container:-moz-full-screen {
max-width: 100% !important;
width: 100%;
height: 100% !important;
background-color: #111
}
.controls {
text-align: center;
font-size: 1em;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.control,
.grid,
.fs-toggle {
width: .66em;
height: .66em;
text-align: center;
line-height: .5em;
cursor: pointer;
display: inline-block;
margin-right: 10px
}
.showControls {
opacity: 1;
pointer-events: auto;
-webkit-transition: opacity .6s 1s ease;
transition: opacity .6s 1s ease
}
.hideControls {
opacity: 0;
pointer-events: none
}
.icon-grid,
.icon-arrow-left,
.icon-arrow-right,
.icon-fullscreen-exit,
.icon-fullscreen {
display:inline-block;
width: 20px;
height: 20px;
background-image: url(../images/controls-light2.png);
background-repeat: no-repeat
}
.icon-grid {
background-position: 0 0
}
.icon-arrow-left {
background-position: -40px 0
}
.icon-arrow-right {
background-position: -80px 0
}
.icon-fullscreen-exit {
background-position: -120px 0
}
.icon-fullscreen {
background-position: -160px 0
}
.fs-toggle {
display: none;
}
.item {
display: inline-block;
cursor: pointer;
width: 24%;
height: auto;
margin-right: .5%
}
.item img,
.item--big img {
width: 100%;
display:block;
}
.items--big {
position: absolute;
top: 0;
left: 0
right:0;
width: 100%;
height: 100%;
pointer-events: none
}
.item--big {
position: absolute;
width: 60%;
height: auto;
left: 20%;
right: 20%;
top: 3em;
opacity: 0;
-webkit-transform: scale(.8);
transform: scale(.8)
}
.item--big .img-caption{
position:absolute;
width:100%;
bottom:0;
left:0;
right:0;
background-color: rgba(0,0,0,0.6);
color:white;
padding:10px;
font-size:.8em;
text-align:center;
}
.fadeInScaleUp {
-webkit-animation: fadeInScaleUp .5s ease-out .6s forwards;
animation: fadeInScaleUp .5s ease-out .6s forwards;
z-index: 3
}
.fadeOut {
-webkit-animation: fadeOut .4s ease-out forwards;
animation: fadeOut .4s ease-out forwards;
z-index: 1
}
@keyframes fadeOut {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
to {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
to {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes fadeInScaleUp {
from {
opacity: 0;
-webkit-transform: scale(.8);
transform: scale(.8)
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes fadeInScaleUp {
from {
opacity: 0;
-webkit-transform: scale(.8);
transform: scale(.8)
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
.scaleDownFadeOut {
-webkit-animation: scaleDownFadeOut .4s ease-in forwards;
animation: scaleDownFadeOut .4s ease-in forwards;
pointer-events: none
}
@keyframes scaleDownFadeOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
99% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes scaleDownFadeOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
99% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
.scaleUpFadeIn {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: scaleUpFadeIn ease-in-out .4s forwards;
animation: scaleUpFadeIn ease-in-out .4s forwards;
-webkit-animation-duration: .4s;
animation-duration: .4s
}
@keyframes scaleUpFadeIn {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
1% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes scaleUpFadeIn {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
1% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
.showLastSecond {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: showLastSecond ease-in-out .4s forwards;
animation: showLastSecond ease-in-out .4s forwards;
-webkit-animation-duration: .4s;
animation-duration: .4s
}
@keyframes showLastSecond {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
1% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
99% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes showLastSecond {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
1% {
opacity: 0;
-webkit-transform: scale(.5);
transform: scale(.5)
}
99% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@media screen and (max-width: 30em) {
.item--big {
width: 80%;
right: 10%;
left: 10%
}
}